<template>
	<view class="content">
		<view class="searchBox flex_b p-l-24 p-r-24">
			<view class="flex" @click="selectAddress">
				<view class="white">{{city||'请选择'}}</view>
				<view class="iconfont icon-xiajiantou white m-l-6" style="font-size: 24rpx;"></view>
			</view>
			<view class="search flex_b p-l-24 p-r-24" @click="$util.redirectTo('/otherpages/search/search')">
				<input type="text" placeholder="请输入搜索内容" placeholder-class="grey font-24 lh-56">
				<view class="iconfont icon-sousuo grey"></view>
			</view>
		</view>

		<view class="p-24 fonList">
			<view class="fonItem" v-for="(item,i) in navHome" @click="routerFn(item)">
				<image :src="$util.img(item.image)" mode="" class="w-64 h-64 m-t-24"></image>
				<view class="m-b-10">{{item.title}}</view>
			</view>
		</view>
		<!-- 公告 -->
		<view class="p-l-24 p-r-24 bor-10" @click="$util.redirectTo('/otherpages/notice/notice')">
			<uv-notice-bar :text="text" direction="column"></uv-notice-bar>
		</view>
		<!-- 长按 -->
		<view class="codeBox flex_b">
			<view class="">
				<view class="white font-28">订阅</view>
				<view class="white font-24">长按识别二维码，关注公众号</view>
			</view>
			<image :src="$util.img(configInfo.wechat_qrcode)" @click="LookImg(configInfo.wechat_qrcode)"
				class="w-106 h-106" :show-menu-by-longpress="true" mode=""></image>
		</view>
		<!-- 精选商铺 -->
		<view class="p-l-24 p-r-24 m-t-10">
			<view class="flex_b m-b-16 ">
				<view class="font-34 font-weight">精选商铺</view>
				<view class="grey font-22" @click="$util.redirectTo('/otherpages/shopHire/shopHire')">查看全部<text
						style="font-size: 22rpx;" class="grey iconfont icon-xiangyoujiantou"></text></view>
			</view>
			<view class="textC grey m-t-40" v-if="!lists.length">
				当前地区暂无商铺~
			</view>
			<button class="m-t-100" @click="selectAddress" type="default" v-if="!city">请先选择城市</button>
			<block v-for="(item,i) in lists" :key="i">
				<shopItem type="shop" :item="item"></shopItem>
			</block>
		</view>
		<uv-picker ref="picker" :columns="columns" keyName="city" @confirm="confirm"></uv-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				notice: [],
				city: '',
				columns: [
					[]
				],
				navHome: [],
				lists: [],
				text: [],
				funList: [{
						image: require('../../static/logo.png'),
						title: '商铺出租',
						router: '/otherpages/shopHire/shopHire'
					},
					{
						image: require('../../static/logo.png'),
						title: '商铺转让',
						router: "/otherpages/shopZrB/shopZrB"
					},
					{
						image: require('../../static/logo.png'),
						title: '成交案例',
						router: "/otherpages/shopcjC/shopcjC"
					},
					{
						image: require('../../static/logo.png'),
						title: '厂房仓库',
						router: "/otherpages/shopckD/shopckD"
					},
					{
						image: require('../../static/logo.png'),
						title: '选址求租',
						router: "/otherpages/seekShop/seekShop"
					},
					{
						image: require('../../static/logo.png'),
						title: '我要出租转让',
						router: "/otherpages/myChuZu/myChuZu"
					},
					{
						image: require('../../static/logo.png'),
						title: '商铺推广师',
						router: "/otherpages/shopSpread/shopSpread"
					},
					{
						image: require('../../static/logo.png'),
						title: '关于金点子',
						router: "/otherpages/about/about"
					}
				],
				configInfo: {}
			}
		},
		onShow() {
			uni.getStorage({
				key: 'city',
				success: res => {
					this.city = res.data
					this.getLists()
				},
				fail: err => {
					this.city = ''
					this.getLists()
				}
			})
		},
		onLoad() {
			this.configFn()
			this.getHomeDetali()
			this.getGongGao()
		},

		methods: {
			LookImg(img) {
				// 网络
				uni.getImageInfo({
					src: `${this.$util.img(img)}`,
					success: function(image) {
						uni.previewImage({
							urls: [image.path],
							longPressActions: {
								itemList: ['发送给朋友', '保存图片', '收藏'],
								success: function(data) {
									console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data
										.index + 1) + '张图片');
								},
								fail: function(err) {
									console.log(err.errMsg);
								}
							}
						});
					}
				});
			},



			configFn() {
				this.$api.sendRequest({
					url: '/api/index/config',
					success: res => {
						this.configInfo = res.data
					}
				})
			},
			// 获取公告列表
			getGongGao() {
				this.$api.sendRequest({
					url: '/api/index/notice',
					success: res => {
						res.data.forEach(item => {
							this.text.push(item.name)
						})

					}
				})
			},
			getLists() {
				this.$api.sendRequest({
					url: '/api/shop/lists',
					data: {
						page: 1,
						num: 10,
						search: '',
						district: '',
						city: this.city,
						businessarea_id: '',
						status: 'all',
						monthrent: 'all',
						area: 'all',
						type: 'all',
						transfer_fee: 'all',
						is_recommend: 1,
						is_deal: 0,
						min_area: '',
						max_area: '',
						min_month_rent: '',
						max_month_rent: '',
						min_transfer_fee: '',
						max_transfer_fee: '',
					},
					success: res => {
						this.lists = res.data.data
					}
				})
			},

			confirm(e) {
				console.log(e);
				uni.setStorage({
					key: 'city',
					data: e.value[0].city,
					success: () => {
						this.city = e.value[0].city
						this.getLists()
					}
				});

				uni.setStorage({
					key: 'cityId',
					data: e.value[0].id,
					success: () => {

					}
				});
			},
			selectAddress() {
				this.$refs.picker.open();
			},
			getHomeDetali() {
				this.$api.sendRequest({
					url: '/api/index/index',
					success: res => {
						this.navHome = res.data.nav
						this.columns[0] = res.data.operatearea
						
						uni.getStorage({
							key: 'city',
							success: res => {
								
							},
							fail: err => {
								uni.setStorage({
									key: 'city',
									data: res.data.operatearea[0].city,
									success: () => {
										this.city = res.data.operatearea[0].city
										this.getLists()
									}
								});
								
								uni.setStorage({
									key: 'cityId',
									data: res.data.operatearea[0].id,
									success: () => {
								
									}
								});
							}
						})
						

					}
				})
			},
			routerFn(item) {
				if (item.url != '/otherpages/about/about' && !this.city) {
					uni.showToast({
						title: '请先选择城市',
						icon: 'error'
					})
					return
				}

				console.log(item);
				if (item.url == '/pages/issue/issue') {
					uni.switchTab({
						url: item.url
					})
				} else {
					this.$util.redirectTo(item.url)
				}
			}
		}
	}
</script>

<style lang="scss">
	.content {
		.searchBox {
			height: 78rpx;
			background-color: $color-sub;

			.search {
				width: 498rpx;
				height: 56rpx;
				background-color: #fae0d5;
				border-radius: 28rpx;
			}
		}
	}

	.fonList {
		display: flex;
		flex-wrap: wrap;

		.fonItem {
			width: 25%;
			text-align: center;

			view {
				font-size: 24rpx;
			}
		}
	}

	.codeBox {
		width: 642rpx;
		height: 126rpx;
		margin: 20rpx auto;
		opacity: 1;
		border-radius: 16rpx;
		background: linear-gradient(123.88deg, rgba(255, 90, 32, 1) 0%, rgba(224, 62, 23, 1) 100%);
		padding: 0 24rpx;
	}
</style>
